<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" onclick="history.go(-1)">返回</el-button>
    </div>
    <div class="content">
      <label for="">
        上级标题:
        <el-input v-model="Ptitle" placeholder="" style="width: 80%" />
      </label>
      <br>
      <label for="">
        二级标题: <el-input v-model="title" placeholder="" style="width: 80%" />
      </label>
      <div style="margin: 20px 0px">
        <label for="">正文:</label>
      </div>
      <!-- <br> -->
      <div>
        <tinymce v-model="content" :height="300" />
      </div>
      <br>
      <label for="">
        排序优先级:
        <el-input v-model="priority" placeholder="" style="width: 80%" />
      </label>

      <br>
      <span> 注：请输入1-999范围整数，数值越小排名越靠前。 </span>
      <br>
      <label
        for=""
        style="margin: 20px 0px; font-weight: normal; display: flex"
      >
        <el-radio v-model="status" label="0">上架</el-radio>
        <el-radio v-model="status" label="1">下架</el-radio>
      </label>
      <div class="sumbtn">
        <el-button type="primary" @click="save">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce' // 添加富文本编辑器
export default {
  components: {
    Tinymce
  },
  data: () => ({
    content: '',
    status: '',
    title: '',
    Ptitle: '',
    priority: ''
  }),
  created() {
    const { id, pid } = this.$route.query
    this.$get('/web/courseware/get', { id }).then((res) => {
      if (pid) {
        this.$get('/web/courseware/get', { id: pid }).then((res) => {
          this.Ptitle = res.data.data.title
        })
        this.title = res.data.data.title
      } else {
        this.Ptitle = res.data.data.title
      }
      this.priority = res.data.data.priority
      this.status = String(res.data.data.status)

      this.content = res.data.data.content
      // console.log(this.content)
    })
  },
  methods: {
    save() {
      if (this.$route.query.pid) {
        this.$put('/web/courseware', {
          content: this.content,
          pid: this.$route.query.pid || 0,
          id: this.$route.query.id || 0,
          priority: this.priority,
          status: this.status,
          title: this.title }, 'json').then(res => {
          if (res.data.code === '0') {
            this.$router.back()
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.$post('/web/courseware', {
          content: this.content,
          pid: this.$route.query.id || 0,
          priority: this.priority,
          status: this.status,
          title: this.title }, 'json').then(res => {
          if (res.data.code === '0') {
            this.$router.back()
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
label {
  margin-bottom: 10px;
  display: block;
}
.container {
  border: 1px solid #dfe6ec;
  width: 80%;
  margin: 30px auto;
  .header {
    height: 50px;
    line-height: 50px;
    text-align: right;
    border-bottom: 1px solid #dfe6ec;
  }
  .content {
    margin: 20px 10px;
  }
  .sumbtn {
    margin: 20px 0;
    text-align: center;
  }
}
</style>
